<template>
  <van-form @submit="onSubmit">
    <div style="text-align: center; margin-top: 10rem">
      <svg
        t="1690862119450"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="8213"
        width="100"
        height="100"
      >
        <path
          d="M512 0C229.236338 0 0 229.236338 0 512s229.236338 512 512 512 512-229.224912 512-512S794.775088 0 512 0z m-6.443844 190.801776c94.681097 0 171.710173 75.886551 171.710173 169.185192s-77.029076 169.208042-171.710173 169.208042-171.698748-75.909401-171.698749-169.185191S410.886484 190.801776 505.556156 190.801776zM793.141276 771.638944c0 61.536429-100.473702 61.536429-216.817084 61.536429H447.664383c-121.107714 0-216.794234 0-216.794234-61.536429v-12.670609c0-117.680137 97.240354-213.48091 216.794234-213.480909h128.659809c119.553879 0 216.817084 95.777922 216.817084 213.480909z"
          fill="#e5e5e5"
          p-id="8214"
        ></path>
        <path
          d="M576.324192 545.487426H447.664383c-119.553879 0-216.794234 95.755071-216.794234 213.480909v12.670609c0 61.536429 95.68652 61.536429 216.794234 61.536429h128.659809c116.343383 0 216.817084 0 216.817084-61.536429v-12.670609c0-117.702988-97.263205-213.48091-216.817084-213.480909zM505.556156 529.19501c94.681097 0 171.710173-75.875126 171.710173-169.185191S600.237253 190.801776 505.556156 190.801776s-171.698748 75.932252-171.698749 169.208043 77.029076 169.185192 171.698749 169.185191z"
          fill="#ffffff"
          p-id="8215"
        ></path>
      </svg>
    </div>
    <van-cell-group inset>
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <!-- 14010101001 -->
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        color="rgb(163,38,38)"
      >
        提交
      </van-button>
    </div>
    <div style="display: flex; justify-content: space-around">
      <van-cell
        class="logindl"
        title="没有账号？点击这里"
        style="color: red; text-align: center"
        to="register"
      />
    </div>
  </van-form>
</template>

<script setup>
import { createApp } from 'vue';
import { Form, Field, CellGroup } from 'vant';
import { ref } from 'vue';
import { login } from '@/service';
import useUserStore from '@/stores/user.js';

const app = createApp();
app.use(Form);
app.use(Field);
app.use(CellGroup);
const phone = ref('');
const password = ref('');
const user = useUserStore();
const onSubmit = async () => {
  const res = await user.userLogin({
    phone: phone.value,
    password: password.value,
  });
  // console.log(res);
  // console.log('submit', values);
};
</script>

<style lang="scss" scoped></style>
